<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SHOPPINGCART</title>
  <link rel="stylesheet" type="text/css" href="css/login.css">
  <script src="js/Vue.js"></script>
  <script src="js/shopping_cart.js"></script>

</head>
<body>
<div id="app" style="width: 100%;text-align: center">
  <!--        <p>{{failMsg}}</p>-->
  <div style="background-color: blue;margin: 20px auto;width: 100%;text-align: end">
    <button @click="logout">注销退出</button>
  </div>
  <div style="margin: 10px auto">
    <table style="margin: 10px auto">
      <thead>
      <tr>
        <td>书号</td>
        <td>书名</td>
        <td>价格</td>
        <td>购买数量</td>
        <td>小计</td>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(b,index) in books">
        <td>{{b.bookId}}</td>
        <td>{{b.name}}</td>
        <td>{{b.price.toFixed(2)}}</td>
        <td>
          <button @click="numOfBuy[index]++;updateTotal();">+</button>
          <span>{{numOfBuy[index]}}</span>
          <button @click="if(numOfBuy[index] > 0)numOfBuy[index]--;updateTotal();">-</button>
        </td>
        <td>{{(b.price * numOfBuy[index]).toFixed(2)}}
        </td>
      </tr>
      <tr>
        总价:{{ total.toFixed(2) }}
      </tr>
      </tbody>
    </table>
  </div>
  <div style="text-align: center;margin: 10px auto">
    <button @click="createAndSubmitOrder">提交订单</button>
    <p v-if="isShow">请稍后...</p>
  </div>
</div>

</body>
</html>